<template>
  <div>
    <div class="ddtop">
      <p>已使用{{ payinfo.surplus }}次 / 共{{ payinfo.num }}次</p>
      <p>有效日期 : {{ payinfo.closingdate }}</p>
    </div>
    <div class="ddcontent2">
      <div class="ddimg">
        <img 
          :src="payinfo.imagepath" 
          width="100%" >
      </div>

      <div class="ddinfo">
        <p>{{ payinfo.itemname }}</p>
        <p>{{ payinfo.specsname }}</p>
      </div>
      <div style="width:30%">
        <span 
          class="moneyinfo" 
          style="color:#333">￥{{ payinfo.amount }}</span>
          <!-- <span class="moneyinfo">* {{ payinfo.num }}</span> -->
      </div>
    </div>
    <div class="moneyinfo2">
      <p>
        <span>订单金额</span>
        <span>￥ {{ payinfo.amount }}</span>
      </p>
      <p>
        <span>购买时间</span>
        <span>{{ payinfo.paytime }}</span>
      </p>
    </div>
    <button 
      type="button" 
      class="mui-btn bottombtn2" 
      @click="checkpay">验证消费</button>
  </div>
</template>
<script>
import Qs from 'qs'
import wx from 'weixin-js-sdk'
export default {
  layout: 'default3',
  data() {
    return {
      ts: this.newStore(),
      payinfo: {
        surplus: '',
        num: '',
        closingdate: '',
        imagepath: '',
        itemname: '',
        specsname: '',
        amount: '',
        num: '',
        paytime: ''
      }
    }
  },
  // mounted() {
  //   const query = Qs.parse(window.location.search.substring(1))
  //   const code = query.code
  //   if (code && code != '') {
  //     // 从微信转回，进行服务器登录
  //     this.doLogin(code)
  //     return
  //   }
  //   // }

  //   // // 判断登录
  //   this.getWxCode()
  // },
  created() {
    this.getpayinfo()
  },
  methods: {
    // getWxCode() {
    //   const wxLoginUrl =
    //     'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf30a6608e950a663&redirect_uri=http://vipcard.eke88.com/ddpage3&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'

    //   // 改成ajax试试
    //   window.location = wxLoginUrl
    // },
    // doLogin(code) {
    //   const res = {
    //     code: code
    //   }
    //   this.spost(this.ts, '/Register/getWeixinCode', res).then(ts => {
    //     console.log(ts.d.data)
    //     localStorage.setItem('token', ts.d.data.token)
    //     // this.getpayinfo()
    //     this.spost(this.ts, '/about/getWxConfig', {
    //       url: location.href.split('#')[0]
    //     }).then(ts2 => {
    //       wx.config({
    //         debug: false,
    //         appId: ts2.d.data.appId,
    //         timestamp: ts2.d.data.timestamp,
    //         nonceStr: ts2.d.data.nonceStr,
    //         signature: ts2.d.data.signature,
    //         jsApiList: ['scanQRCode']
    //       })
    //     })
    //   })
    // },

    checkpay() {
      // alert('checkpay')
      const req = {
        token: localStorage.getItem('token'),
        orderno: this.$route.query.orderno,
        nowtime: this.$route.query.nowtime,
        ordertoken: this.$route.query.ordertoken
      }
      this.spost(this.ts, '/Orderc/examine', req).then(ts => {
        if (ts.d.flag == 200) {
          this.$router.push({
            name: 'errorpage',
            query: {
              errormsg: '验证成功',
              orderno: this.$route.query.orderno,
              nowtime: this.$route.query.nowtime,
              ordertoken: this.$route.query.ordertoken
            }
          })
        } else {
          this.$router.push({
            name: 'errorpage',
            query: {
              errormsg: ts.d.message,
              orderno: this.$route.query.orderno,
              nowtime: this.$route.query.nowtime,
              ordertoken: this.$route.query.ordertoken
            }
          })
        }
      })
    },
    //   wx.ready(() => {
    //     wx.scanQRCode({
    //       needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
    //       scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
    //       success: res => {
    //         var result = res.resultStr // 当needResult 为 1 时，扫码返回的结果

    //       }
    //     })
    //   })
    // },
    getpayinfo() {
      this.payinfo = {}
      const req = {
        token: localStorage.getItem('token'),
        orderno: this.$route.query.orderno,
        nowtime: this.$route.query.nowtime,
        ordertoken: this.$route.query.ordertoken
      }
      this.spost(this.ts, '/Orderc/Settlement', req).then(ts => {
        if (ts.d.flag == 200) {
          this.payinfo = ts.d.data
        } else {
          mui.alert(ts.d.message, '提示')
        }
      })
    }
  }
}
</script>

<style socped>
.bottombtn2 {
  background: #00b2a3;
  color: #fff;
  position: fixed;
  padding: 10px;
  width: 90%;
  bottom: 10%;
  left: 5%;
  border-radius: 25px;
  border: 0;
}
.moneyinfo2 {
  margin-top: 100px;
  padding: 0 5%;
}
.moneyinfo2 p {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f1f1f1;
}
.moneyinfo2 p span:first-child {
  color: #333;
}
.score {
  padding: 20px 5%;
}
.ddtop {
  height: 150px;
  width: 100%;
  background: #00b2a3;
  position: relative;
}
.ddtop p {
  color: #fff;
  line-height: 50px;
  text-align: center;
  padding-bottom: 0;
}
.ddtop p:first-child {
  font-size: 20px;
}
.scorediv {
  border-bottom: 1px solid #f1f1f1;
  padding: 15px 0;
}
.scorediv p {
  display: flex;
  justify-content: space-between;
  color: #333;
}
.ddcontent2 {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
  background: #f8f8f8;
  padding: 20px;
  position: absolute;
  top: 120px;
  left: 5%;
  border-radius: 5px;
}
.ddcontent:first-child {
  margin-top: 0;
}
.ddimg {
  width: 24%;
}
.ddinfo {
  width: 60%;
  padding: 0 10px;
}
.ddinfo p:first-child {
  color: #333;
  line-height: 18px;
}
.money {
  padding: 15px 0;
  padding-bottom: 6px;
  text-align: right;
  color: #333;
}
.moneyinfo {
  text-align: right;
  display: inline-block;
  width: 100%;
  color: rgb(143, 143, 148);
  line-height: 18px;
}
</style>
